<script setup lang="ts">
import { ref, watch } from 'vue'
import { useMusicStore } from '../../../store/listMusic'
import type { ResourcesItem, TrackItem,resourceExtInfoType } from '../../../services/type'

import type { CreativesInnerType } from '../../../services/type'

const songlist = ref<TrackItem[]>([])
const musicState = useMusicStore()

interface Props {
  title: string
  guessData: CreativesInnerType[]
}
const props = defineProps<Props>()
console.log(props.guessData)
props.guessData.forEach(v=>{
  (v.resources as ResourcesItem[]).forEach((i:ResourcesItem)=>{
    songlist.value.push(i.resourceExtInfo?.song)
  })
})


const goPlayer=(val:TrackItem)=>{
  musicState.songs = songlist.value
  musicState.song = val
  uni.navigateTo({url:'/pages/player/player'})
}

const btn =(val:TrackItem)=>{
  musicState.song = val
}
</script>

<template>
  <view class="recommandSongList">
    <uni-section :title="props.title" type="line">
      <view class="line2">
        <view class="item" v-for="(item,index) in props.guessData" :key="index">
          <view class="val" v-for="(val,i) in item.resources" :key="i" @click="goPlayer(val.resourceExtInfo.song)">
              <image :src="val.uiElement.image.imageUrl"></image>
              <view class="word">
                <text class="text">{{ val.resourceExtInfo.song.name }}</text>
                <text class="text">{{ val.resourceExtInfo.song.ar.map(v=>v.name).join("/") }}</text>
              </view>
              <button v-if = "((musicState.song as TrackItem).id === (val.resourceExtInfo?.song as any).id) && musicState.isSong">||</button>
              <button v-else @click.stop="btn(val.resourceExtInfo?.song)">▶</button>
          </view>
        </view>
    </view>
    </uni-section>
  </view>
</template>

<style scoped lang="scss">
.line2::-webkit-scrollbar{
  display: none;
}
.line2{
  display: flex;
  height: 420rpx;
  overflow-x: scroll;
  .item{
    flex-shrink: 0;
    margin-right: 10rpx;
    display: flex;
    flex-direction: column;
    .val{
      width: 600rpx;
      display: flex;
      padding: 20rpx;
      image{
        width: 90rpx;
        height: 90rpx;
      }
      .word{
        margin-left: 30rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .text{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      button{
        width: 100rpx;
      }
    }
  }
}
</style>